<template>
    <div>
        <el-row :model="search">
            <el-col :span="6">
                <el-input placeholder="请按姓名搜索" v-model="search.input1" clearable>
                </el-input>
            </el-col>
            <el-col :span="6">
                <el-input placeholder="请按部门名称搜索" v-model="search.input2" clearable>
                </el-input>
            </el-col>
            <el-col :span="6">
                <el-input placeholder="请按科室名称搜索" v-model="search.input3" clearable>
                </el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="el-icon-search" @click="searchInfor">搜索</el-button>
            </el-col>
        </el-row>
        <br><br>
        <el-table :data="docterList" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="did" label="编号" width="80">
            </el-table-column>
            <el-table-column prop="dname" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="dsex" label="性别">
            </el-table-column>
            <el-table-column prop="dename" label="部门名称">
            </el-table-column>
            <el-table-column prop="kname" label="科室名称">
            </el-table-column>
            <el-table-column prop="docphone" label="联系方式">
            </el-table-column>
            <el-table-column prop="didentify" label="身份证号">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.row.did)">修改</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row.did)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>
        <el-button type="warning" @click="addDialogVisible = true" class="add">添加医生</el-button>


        <el-dialog title="添加医生" :visible.sync="addDialogVisible" style="text-align: left;">
            <el-form :model="newDoctor" label-width="100px">
                <el-form-item label="姓名">
                    <el-input v-model="newDoctor.dname"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="newDoctor.didentify"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio v-model="newDoctor.dsex" label="男">男</el-radio>
                    <el-radio v-model="newDoctor.dsex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="部门名称">
                    <el-select v-model="newDoctor.deid" placeholder="请选择部门">
                        <el-option v-for="dept in deptList" :key="dept.deid" :label="dept.dename" :value="dept.deid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科室名称">
                    <el-select v-model="newDoctor.kid" placeholder="请选择科室">
                        <el-option v-for="keshi in keshiList" :key="keshi.kid" :label="keshi.kname" :value="keshi.kid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="newDoctor.docphone"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addDoctor">确定</el-button>
            </div>
        </el-dialog>

        <el-dialog title="修改医生信息" :visible.sync="addDialogVisible2" style="text-align: left;">
            <el-form :model="newDoctor2" label-width="100px">
                <el-form-item label="姓名">
                    <el-input v-model="newDoctor2.dname"></el-input>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="newDoctor2.didentify"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio v-model="newDoctor2.dsex" label="男">男</el-radio>
                    <el-radio v-model="newDoctor2.dsex" label="女">女</el-radio>
                </el-form-item>
                <el-form-item label="部门名称">
                    <el-select v-model="newDoctor2.deid" placeholder="请选择部门">
                        <el-option v-for="dept in deptList" :key="dept.deid" :label="dept.dename" :value="dept.deid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="科室名称">
                    <el-select v-model="newDoctor2.kid" placeholder="请选择科室">
                        <el-option v-for="keshi in keshiList" :key="keshi.kid" :label="keshi.kname" :value="keshi.kid">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="newDoctor2.docphone"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible2 = false">取消</el-button>
                <el-button type="primary" @click="updateDoctor">确定</el-button>
            </div>
        </el-dialog>


        <div class="block" style="margin-top: 10px; margin-left: 300px">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="pageInfo.pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageInfo.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return { 
            search: {
                input1: "",
                input2: "",
                input3: ""
            },
            deptList: [],
            dept: {},
            keshi: {},
            keshiList: [],
            docterList: [],
            pageInfo: {
                pageNum: 1,
                pageSize: 5,
            },
            input1: "",
            input2: "",
            input3: "",
            addDialogVisible: false,
            addDialogVisible2: false,
            newDoctor: {
                did: '',
                dname: '',
                dsex: '',
                docphone: '',
                deid: '',
                didentify: '',
                kid: ''
            },
            newDoctor2: {
                did: '',
                dname: '',
                dsex: '',
                docphone: '',
                deid: '',
                didentify: '',
                kid: ''
            }
        }
    },
    methods: {
        handleEdit(did) {
            this.addDialogVisible2 = true;
            this.$axios.get("docter/getById?did=" + did)
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.newDoctor2 = vo.data;
                    }
                })
        },
        updateDoctor() {
            this.addDialogVisible2 = false;
            console.log(this.newDoctor2);
            this.$axios.put("docter/updateDoctor", this.newDoctor2)
                .then((result) => {
                    let vo = result.data;
                    this.$messsage = vo.message;
                    if (vo.code == 200) {
                        this.list();
                    }
                    this.newDoctor2 = {
                        did: '',
                        dname: '',
                        dsex: '',
                        docphone: '',
                        deid: '',
                        didentify: '',
                        kid: ''
                    }
                })
        },
        addDoctor() {
            this.addDialogVisible = false;
            this.$axios.post("docter/add", this.newDoctor)
                .then((result) => {
                    let vo = result.data;
                    this.$messsage = vo.message;
                    if (vo.code == 200) {
                        this.list();
                    }
                    this.newDoctor = {
                        did: '',
                        dname: '',
                        dsex: '',
                        docphone: '',
                        deid: '',
                        didentify: '',
                        kid: ''
                    }
                })
        },
        handleDelete(did) {
            this.$axios.delete("docter/delete?did=" + did)
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.list();
                    }
                })
        },
        
        searchInfor() {
            this.$axios.get("docter/getByCondition?dname=" + this.search.input1 + "&dename=" + this.search.input2 + "&kname=" + this.search.input3)
                .then((result) => {
                    let vo = result.data;
                        if(vo.code == 200){
                            this.docterList = vo.data;
                            this.search={
                                input1: "",
                                input2: "",
                                input3: ""
                        }
                    }       
                })
        },
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
            this.list();
        },
        handleCurrentChange(val) {
            this.pageInfo.pageNum = val;
            this.list();
        },
        list() {
            this.$axios.get("docter/getAll?pageNum=" + this.pageInfo.pageNum + "&pageSize=" + this.pageInfo.pageSize)
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.docterList = vo.data.list;
                        this.pageInfo = vo.data;
                    }
                })
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 == 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
        }
    },
    mounted() {
        this.list();
        this.$axios.get("dept/getAll")
            .then((result) => {
                let vo = result.data;
                if (vo.code == 200) {
                    this.deptList = vo.data;
                }
            }),
            this.$axios.get("keshi/getAll")
                .then((result) => {
                    let vo = result.data;
                    if (vo.code == 200) {
                        this.keshiList = vo.data;
                    }
                })
    }
}

</script>

<style>
.add {
    margin-left: 10px;
}

.el-table .warning-row {
    background: #fdf5e6;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>
